<template>
	<div>
		<el-card class="!border-none p-4" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				单据类型
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span>类型：</span>
						<el-radio-group v-model="radio" class="flex-1 ml-[10px]" >
							<el-radio label="1" size="large">采购付款单</el-radio>
						</el-radio-group>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none p-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				收款单
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">订单编号：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款类型：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款银行：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款账号：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款金额：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">同一订单编码第几次收款：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款公司名称：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">大写金额：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">付款抬头：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">多付金额：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">少付金额：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">经办人：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">备注：</span>
						<span class="v-wordBreak ml-[10px]">开具发票</span>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none p-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				审核结算
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="5">
					<div class="main-color v-flex">
						<span>审核：</span>
						<span class="v-wordBreak ml-[10px]">结算</span>
					</div>
				</el-col>
			</el-row>
			<!-- 结算显示 -->
			<el-row class="mt-[20px]">
				<el-col :span="5">
					<div class="main-color v-flex">
						<span>结算金额：</span>
						<span class="v-wordBreak ml-[10px]">2579.00</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="5">
					<div class="main-color v-flex v-col-top">
						<span class="mr-[10px]">照片：</span>
						<el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover" />
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="5">
					<div class="main-color v-flex">
						<span>付款银行：</span>
						<span class="v-wordBreak ml-[10px]">HSBC</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="5">
					<div class="main-color v-flex">
						<span>付款金额：</span>
						<span class="v-wordBreak ml-[10px]">HSBC</span>
					</div>
				</el-col>
			</el-row>
			<!-- 结算显示 end-->
			<!-- 驳回 -->
			<el-row class="mt-[20px]">
				<el-col :span="5">
					<div class="main-color v-flex">
						<span>原因：</span>
						<span class="v-wordBreak ml-[10px]">审核驳回的具体原因</span>
					</div>
				</el-col>
			</el-row>
			<!-- end -->
		</el-card>
	</div>
</template>

<script lang="ts" setup>
	const radio = ref('1')
</script>

<style>
</style>